<template>
  <div>
    <keep-alive>
      <router-view v-if="isRouterAlive"></router-view>
    </keep-alive>
    <div class="clear"></div>

    <div class="fbox"></div>
    <!--      底部导航栏-->
    <div class="footbox">
      <el-row class="bottom-nav">
        <van-tabbar
          v-model="actives"
          route
          active-color="#ee0a24"
          inactive-color="#000"
        >
          <van-tabbar-item to="/homePage" icon="home-o">首页</van-tabbar-item>
          <van-tabbar-item to="/Message" icon="chat-o">消息</van-tabbar-item>

          <van-tabbar-item to="/discove" icon="browsing-history-o"
            >发现</van-tabbar-item
          >
          <van-tabbar-item to="/cat" icon="shopping-cart-o"
            >购物车</van-tabbar-item
          >
          <van-tabbar-item to="/myinfo" icon="user-o">{{
            $store.state.emailLogin ? "我的" : "未登录"
          }}</van-tabbar-item>
        </van-tabbar>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "homePage",
  props: ["tabName"],
  provide() {
    reload: this.reload;
  },
  data() {
    return {
      num: true,
      actives: 0,
      list: [
        {
          img: require("../assets/icon/f01.png"), //原始显示的图标
          active: require("../assets/icon/f1.png"), //点击之后要显示的图标
          name: "首页",
          path: "/homePage",
        },
        {
          img: require("../assets/icon/f02.png"),
          active: require("../assets/icon/f2.png"),
          name: "发现",
          path: "/discove",
        },
        {
          img: require("../assets/icon/f03.png"),
          active: require("../assets/icon/f3.png"),
          name: "购物车",
          path: "/cat",
        },
        {
          img: require("../assets/icon/f04.png"),
          active: require("../assets/icon/f4.png"),
          name: "我的",
          path: "/myinfo",
        },
      ],
      isRouterAlive: true,
    };
  },
  methods: {
    addClassName: function (path) {
      this.$router.replace(path);
    },
    reload() {
      this.isRouterAlive = true;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.footbox {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;

  .bottom-nav {
    position: fixed;
    width: 100%;
    max-width: 640px;
    bottom: 0;
    background: #fff;
    z-index: 99999;
    padding-top: 0.2rem;
    height: 3.5rem;
  }
  .bottom-nav img {
    height: 1.3rem;
  }
  .list-a {
    text-align: center;
    width: 100%;
  }
}
.fade-enter-active,
.fade-leave-avtive {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>